/**
 * 文件导入按钮组件,自带样式
 *
 * 依赖项: layui,bootstrap, sheetJS, fileSaver, Jquery, react.
 *  <script src="/plugins/sheetJs/xlsx.core.min.js"></script>
    <script src="/plugins/sheetJs/filesaver.min.js"></script>
    <script src="/plugins/react/layui/layui.js"></script>
    <script src="/plugins/jquery.min.js" type="text/javascript"></script>
    <script src="/js/core/utils.min.js" type="text/javascript"></script>
    <script src="/js/core/helper.min.js" type="text/javascript" ></script>
    <script src="/plugins/react/react.min.js"></script>
    <script src="/plugins/react/react-dom.min.js"></script>
    <script src="/js/core/building_utils.min.js?v=70"></script>
    <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>

    属性props:
    children: 按钮的名称放在标签内容中提供
    onClick: 按键回调
    dataCallBack属性 : 数据回调

    使用:
    1. onClick 按钮回调只会回调父组件传入的方法,不会做任何其他操作
    2. importExcel 父组件需要在自己的onClick回调逻辑中调用本组件的importExcel()方法
    3. dataCallBack属性 - importExcel解析出excel的json字符串之后回调,父组件可以自己处理逻辑

 */
class FileImportButton extends React.Component{
    constructor(props){
        if(props.children instanceof String){
            console.error("按钮名称格式不对!")
            return;
        }
        super(props);
        this.acceptFileTypes = ["xlsx", "xlsb", "xlsm", "xls", "csv"].map(function (x) {return "." + x;}).join(",");
    }

    importExcel(){
        this.refs.upLoad.click();
    }

    onClick(){
        if(this.props.onClick)
            this.props.onClick();
    }

    handleFileChange(e){
        console.log("handleFileChange");
        this.checkIESupport();
        const files = e.target.files;
        const reader = new FileReader();
        reader.onload = (e) => {
            /* Parse data */
            const bstr = e.target.result;
            const wb = XLSX.read(bstr, {type: 'binary'});
            /* Get first worksheet */
            const wsname = wb.SheetNames[0];
            const ws = wb.Sheets[wsname];
            /* Convert array of arrays */
            const data = XLSX.utils.sheet_to_json(ws, {header: 1});
            /* Update state */
            if(this.props.dataCallBack) {
                this.props.dataCallBack(data);
                this.refs.upLoad.value = "";
            }
        };

        reader.readAsBinaryString(files[0]);
    }

    checkIESupport(){
        if (!FileReader.prototype.readAsBinaryString) {

            FileReader.prototype.readAsBinaryString = (fileData) => {
                let binary = "";
                let pt = this;
                let reader = new FileReader();
                reader.onload =  (e) => {
                    let bytes = new Uint8Array(reader.result);
                    let length = bytes.byteLength;
                    for (let i = 0; i < length; i++) {
                        binary += String.fromCharCode(bytes[i]);
                    }
                    //pt.result  - readonly so assign binary
                    const wb = XLSX.read(binary, {type: 'binary'});
                    /* Get first worksheet */
                    const wsname = wb.SheetNames[0];
                    const ws = wb.Sheets[wsname];
                    /* Convert array of arrays */
                    const data = XLSX.utils.sheet_to_json(ws, {header: 1});
                    /* Update state */
                    if(this.props.dataCallBack) {
                        this.props.dataCallBack(data);
                        this.refs.upLoad.value = "";
                    }
                }

                reader.readAsArrayBuffer(fileData);
            }
        }
    }

    clearData(){
        this.refs.upLoad.value="";
    }

    render(){
        return (
            <div className="pull-left">
                <button type="button" className="layui-btn layui-btn-small layui-btn-sm" style={{marginRight:5}} onClick={()=>this.onClick()}>{this.props.children}</button>
                <input type="file" ref="upLoad" style={{display:"none"}} onChange={(e)=>this.handleFileChange(e)} accept={this.acceptFileTypes}/>
            </div>
        )
    }
}